Runhang Notes

HTML

HTML5 新特性

  • 文件类型申明只有一种：<!DOCTYPE HTML>
  • New Tags： section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
  • New Input Type: date, email, url …
  • New Attriabute: Ping, Charset, async
  • New APIs: Geolocation, Drag & Drop, Local Storage, Application Cache, Web Workers, SSE, Canvas & WebGL, Audio / Video

CSS

1. CSS 优先级

From low to high:

Type Selector < Class Selector < Id Selector < Inline Style

!important 拥有最高优先级，但是不要常用，尽可能用更具体的selector 去取代importent，如.someClass>div#someId

同时有存在!importantd的情况，看元素本身的优先级

#JS

###回调函数: 函数式编程的特性，将函数(function)作为参数进行传递的方法，就叫做回调函数(高阶函数)，如下例

$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});     //因为一个 无名函数 被作为参数一样传递给了 click, click 会执行这个函数，这就是典型的回调函数
// 此外，因为这个无名函数不会被自动调用，只能在 click 事件被触发时调用，所以叫做回调函数

//当回调函数具有名字时，回调方式变成如下:
function doStuff(data){...}     //带名字的函数
function otherStuff(argu1, argu2, callback){
var a; // 变量a经过了一系列的操作
callback(a);    }
//开始调用
otherStuff(x, y, doStuff) //这里 doStuff 会被赋予xy作用后的a，然后在被调用，也是一种典型的回调函数

###闭包: 能够访问自由变量的函数。 OR 定义在闭包中的函数可以“记忆”它被创建时候的环境

function makeFunc() {
  var name = "Mozilla";                 // name 是一个局部变量
  function displayName() {           // displayName 是一个内部函数，仅供内部调用
    alert(name);  }                           // displayName 没有自己的局部变量，但是依然访问到了外部变量name
  return displayName;  }                 // 说明内部函数可以使用父函数中定义的变量，即词法作用域
  
var myFunc = makeFunc();            //刚方法依然会返回 “Mozilia” 的提示框，因为函数已经和那个作用域里面的数据环境关联在一起
myFunc();                                       //因为在这里的 myFunc已经变成了一个闭包

下例展示了闭包的实际用处

var Counter = (function() {
  var privateCounter = 0;                                       //局部变量值为0
  function changeBy(val) {                                      //回调一个新函数 操作加一减一
    privateCounter += val; }
  return {
    increment: function() { changeBy(1) },              // 一个函数返回其自身的函数 就是闭包 这里increase decrease 和 value都算是闭包
    decrement: function() {changeBy(-1) },
    value: function() { return privateCounter }
  }   
})();
console.log(Counter.value()); /* logs 0 */          // 正常，原值为0
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */          // 仔细思考，这时候闭包的环境已经改变，局部变量 privateCounter 已经变成了2并存储下来
Counter.decrement();                                        // 再次改变闭包环境，但是共享一个函数定义
console.log(Counter.value()); /* logs 1 */

闭包的好处: 1.希望一个变量长期驻扎在内存中 2.避免全局变量的污染 3.私有成员的存在 ###前端跨域: JOSNP， iFrame， 表单submit， 或者后端response时返回Head: ‘Access-Control-Allow-Origin’:'特定的可以接受的域名

#React

  • Ajax 或者 setInterval 的时候需要 .bind(this) , 因为JS默认作用域为全局，所以必须绑定到react元素上才能找到相关的方法 找Bug的血泪史／成长史

  • React中样式不能用一般的 style=“color:black, font-size:14px” 表示，而是需要以

    style={{color:black, fontsize:14px}}

    这样的写法

  1. 小Bug close tag ——> 如何调试前端 浏览器兼容 ——> default.css *{margin:0,padding:0}
  2. 大Bug 做前端不知道服务器知识 IIS在共享网盘扯皮 React跟着视频做了QA 留言(ref／onchang获取表单内容，新版本ReactDOM， gulp) 自己做todo

[CSS] 移动端解决方案: REM

特点

整体缩放，保持格局永远一致，但是对于特大屏幕来说浪费了空间

别适合微信H5开发，因为不需要考虑特别大的屏幕，只需要在细微差异的手机上保持布局一致

流程

假设设计师的视觉稿是按照iPhone6的宽度来设计的，即375px (如果是高清的视觉稿750/2=375) 那么，我们可以完全按照视觉稿上的尺寸来赋值给元素的样式，比如视觉稿上的尺寸是80px，那么在css中就可以直接定义width:80px; 页面中所有的尺寸都这样来设置。

当所有的网站所有的页面样式都设置好之后。

我们需要做两件事情：

  1. 设置页面的rem大小

    html {
font-size: calc(100vw/3.75);
}

    100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px

  2. 替换页面中的单位，把所有的px单位替换成rem，除以100，比如前面的80px，就是0.8rem

    这样在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5中，因为设备的宽度变小了，100vw/3.75得到的值，会相应的变小，即rem的单位值会变小，页面中所有的尺寸会等比例缩放。

    这样就可以做到针对任何分辨率的设备保持视觉一致了。

    最后，前面用到vw单位，但是低版本的设备可能不支持，那么就需要js来处理一下：

    document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

    之所以前面让1rem等于100px，而不是1rem等于1px，是因为在chrome下针对中文的最小字体是12px。

坑

  • 可以和bootstrpe等框架一起使用（bootstrap 4 也全部换成了rem单位）
  • 有个小坑，使用rem方案的时候，务必把一些默认值也重新用rem写一遍，例如p默认的单位是px，有时看起来合适就没有改p的size，但是缩放的时候会发现所有东西都一起缩放了唯独你的p标签孤零零一个人…

← 微信开发 →